<template>
  <div class="app-container">

    <el-form class="formList"
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
      size="small">
      <el-row>

        <el-form-item label="项目名称"
          prop="itemName">
          <el-input v-model="queryParams.itemName"
            placeholder="请输入项目名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item label="项目类型"
          prop="itemType">
          <el-select v-model="queryParams.itemType"
            placeholder="请选择项目类型"
            clearable
            size="small">
            <el-option v-for="dict in itemTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </el-form-item>

        <el-form-item label="投放门店"
          prop="storeId">
          <el-select v-model="queryParams.storeId"
            placeholder="请选择投放门店"
            clearable
            size="small">
            <el-option v-for="dict in storeInFoOptions"
              :key="dict.storeId"
              :label="dict.storeName"
              :value="dict.storeUid" />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="服务项目分类">
          <el-cascader :props="{ checkStrictly: true }"
            style="width: 100%;"
            v-model="categoryUids"
            :options="categoryOptions"
            clearable
            filterable
            @change="categoryUidChange">
          </el-cascader>
        </el-form-item>

        <el-form-item style="margin-left: 22px;">
          <el-button type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh"
            size="mini"
            @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <el-row class="row-mbinfo"
      style="margin-left: 0px; margin-right: 0px;">
      <el-button-group style="width: 400px;">
        <el-button :class="activeClass == -1 ? 'button-sku-blue' : ''"
          @click="handleQueryStatus(-1)"
          size="small">
          <svg-icon icon-class="product_info_all" />
          <span style="margin-left: 14%;">全部</span>
        </el-button>
        <el-button :class="activeClass == 1 ? 'button-sku-blue' : ''"
          @click="handleQueryStatus(1)"
          size="small">
          <svg-icon icon-class="product_info_sale" />
          <span style="margin-left: 14%;">销售中</span>
        </el-button>
        <el-button :class="activeClass == 0 ? 'button-sku-blue' : ''"
          @click="handleQueryStatus(0)"
          size="small">
          <svg-icon icon-class="product_info_zero" />
          <span style="margin-left: 14%;">已下架</span>
        </el-button>
      </el-button-group>

      <el-button type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        v-hasPermi="['proBoxService:item:add']">新增</el-button>

      <right-toolbar :showSearch.sync="showSearch"
        @queryTable="getList"></right-toolbar>
    </el-row>
    <div class="divTable">
      <el-table border
        v-loading="loading"
        :data="unitList"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection"
          min-width="55"
          align="center" />
        <el-table-column label="项目主图"
          align="center"
          prop="itemMainImage"
          min-width="80"
          heith="60">
          <template slot-scope="scope">
            <el-image v-if="scope.row.itemMainImage != null && scope.row.itemMainImage != ''"
              slot="reference"
              :src="scope.row.itemMainImage"
              class="image-rows"
              :preview-src-list="[scope.row.itemMainImage]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="服务项目名称"
          align="left"
          prop="itemName"
          min-width="240">
          <template slot-scope="scope">
            <a style="color: #1890ff;"
              @click="handledetail(scope.row)">{{ scope.row.itemName }}
            </a>
          </template>
        </el-table-column>
        <el-table-column label="服务项目分类"
          align="left"
          prop="categoryUidsStr"
          min-width="140">
        </el-table-column>
        <el-table-column label="面价"
          align="center"
          prop="itemPriceStr"
          min-width="100" />
        <el-table-column label="活动价格"
          align="center"
          prop="itemFavorablePriceStr"
          min-width="100" />
        <el-table-column label="美容师耗卡"
          align="center"
          prop="itemSettlementPriceStr"
          min-width="100" />
        <el-table-column label="项目类别"
          align="center"
          prop="itemTypeStr"
          min-width="100" />
        <el-table-column label="门店"
          align="center"
          prop="isCommon"
          min-width="240">
          <template slot-scope="scope">
            <span>{{ scope.row.isCommon == '1' ? '通用' : '' }}</span>
            <p v-if="scope.row.isCommon == '0'"
              v-for="itme in scope.row.platformStores">{{ itme.storeName }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="修改时间"
          align="center"
          prop="updateTime"
          sortable
          min-width="200">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            <br />
            <span>{{ statusFormat(scope.row.auditStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="前端展示"
          align="center"
          prop="isShow"
          min-width="80">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isShow"
              active-value="1"
              inactive-value="0"
              @change="handleShowChange(scope.row)"
              v-hasPermi="['proBoxService:item:recommend']">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="状态"
          align="center"
          prop="auditStatus"
          min-width="80">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.auditStatus"
              active-value="1"
              inactive-value="0"
              @change="handleStatusChange(scope.row)"
              v-hasPermi="['proBoxService:item:updateStatus']">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作"
          align="center"
          min-width="120"
          fixed="right">
          <template slot-scope="scope">

            <el-button size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)">修改</el-button>

            <el-dropdown size="mini"
              @command="(command) => handleCommand(command, scope.row)">
              <span class="el-dropdown-link"
                style="font-size: 12px;color: #5DA9EF;">
                <i class="el-icon-d-arrow-right el-icon--right"></i>更多
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="scope.row.isCommon == 0"
                  command="addStore"
                  type="text"
                  icon="el-icon-plus"
                  v-hasPermi="['proBoxService:item:addStore']">投放门店</el-dropdown-item>
                <el-dropdown-item command="addDevice"
                  type="text"
                  icon="el-icon-plus"
                  v-hasPermi="['proBoxService:item:addDevice']">添加设备</el-dropdown-item>
                <el-dropdown-item command="addItem"
                  type="text"
                  icon="el-icon-plus"
                  v-hasPermi="['proBoxService:item:']">添加排斥项目</el-dropdown-item>
                <!--
                                <el-dropdown-item command="addItemActivity" type="text" icon="el-icon-plus"
                                    v-hasPermi="['proBoxService:activity:add']">添加活动项目</el-dropdown-item>
									-->
                <el-dropdown-item v-if="scope.row.auditStatus == 0"
                  command="handleDelete"
                  type="text"
                  icon="el-icon-delete"
                  v-hasPermi="['proBoxService:item:del']">删除项目</el-dropdown-item>
              </el-dropdown-menu>

            </el-dropdown>

          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>

    <!-- 投放门店 -->
    <el-dialog title="查询门店信息"
      :visible.sync="viewOpen"
      min-width="900px"
      append-to-body
      :destroy-on-close="true"
      @close="hahas"
      z-index="1000">
      <el-button @click="selectCommodity"
        style="float: right;margin: -10px 0px 5px 5px;">投放门店</el-button>
      <selected ref="child"
        style="margin-top: 10px;"
        v-if="selectedData.length > 0"
        :selectedData="selectedData">
      </selected>

      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="submitForms">确 定</el-button>
        <el-button @click="cancels">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加设备 -->
    <el-dialog title="查询设备信息"
      :visible.sync="viewOpenDevice"
      min-width="900px"
      append-to-body
      :destroy-on-close="true"
      @close="hahasDevice"
      z-index="1000">
      <el-button @click="selectCommodityDevice"
        style="float: right;margin: -10px 0px 5px 5px;">添加设备</el-button>
      <selectedDevice ref="childs"
        style="margin-top: 10px;"
        v-if="selectedDataDevice.length > 0"
        :selectedData="selectedDataDevice">
      </selectedDevice>

      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="submitFormsDevice">确 定</el-button>
        <el-button @click="cancelsDevice">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 叠加项目 -->
    <el-dialog title="查询项目信息"
      :visible.sync="viewOpenItem"
      min-width="1100px"
      append-to-body
      :destroy-on-close="true"
      @close="hahasItem"
      z-index="1000">
      <el-button @click="selectCommodityItem"
        style="float: right;margin: -10px 0px 5px 5px;">添加项目</el-button>
      <selectedItem ref="childItem"
        style="margin-top: 10px;"
        v-if="selectedDataItem.length > 0"
        :selectedData="selectedDataItem">
      </selectedItem>

      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="submitFormsItem">确 定</el-button>
        <el-button @click="cancelsItem">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加活动项目 -->
    <el-dialog title="查询活动项目"
      :visible.sync="viewOpenActivity"
      min-width="1100px"
      append-to-body
      :destroy-on-close="true"
      @close="hahas"
      z-index="1000">
      <el-button @click="selectCommodityActivity"
        style="float: right;margin: -10px 0px 15px 5px;">添加活动项目
      </el-button>
      <selectedItemActivity ref="childssss"
        style="margin-top: 10px;"
        v-if="selectedDataActivity.length > 0"
        :selectedData="selectedDataActivity"
        @tabRespon="tabResponActivity">
      </selectedItemActivity>

      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="cancelsActivity">确 定</el-button>
        <el-button @click="cancelsActivity">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 投放门店 -->
    <commodityStore v-if="storeOpen"
      @toCloseBox="toCloseBox"
      @multipleSelection="multipleSelection"
      :flag="storeOpen"
      :source="false"
      ref="selTable"></commodityStore>
    <!-- 添加设备 -->
    <commodityDevice :itemUid="storeItemId"
      v-if="deviceOpen"
      @toCloseBox="toCloseBoxDevice"
      @multipleSelection="multipleSelectionDevice"
      :flag="deviceOpen"
      :source="false"
      ref="selTables">
    </commodityDevice>
    <!-- 叠加项目 -->
    <commodityItem :itemUid="storeItemId"
      v-if="itemOpen"
      @toCloseBox="toCloseBoxItem"
      @multipleSelection="multipleSelectionItem"
      :flag="itemOpen"
      :source="false"
      ref="selTabless">
    </commodityItem>
    <!-- 添加活动项目 -->

    <el-dialog title="提示"
      :visible.sync="dialogVisible"
      min-width="50%">
      <el-form ref="form"
        :model="form"
        :rules="rules"
        label-min-width="140px"
        label-position="right">
        <el-form-item label="活动类型"
          prop="activityType">
          <el-radio-group v-model="form.activityType">
            <el-radio label="new">新人购</el-radio>
            <el-radio label="limitTime">限时购</el-radio>
            <el-radio label="seckill">秒杀</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否限定"
          prop="isLimit">
          <el-radio-group v-model="form.isLimit">
            <el-radio label="0">不限量</el-radio>
            <el-radio label="1">限量</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="库存数量"
          prop="isLimit"
          v-if="form.isLimit == 1">
          <el-input-number style="width:150px;"
            :controls="false"
            :step="0"
            :min="1"
            :max="999"
            v-model="form.activityStock"></el-input-number>
        </el-form-item>

        <el-form-item label="活动时间"
          prop="time">

          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss"
            v-model="form.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>

        </el-form-item>

        <el-form-item label="是否重复开启"
          prop="weekDay">
          <el-select v-model="form.weekDayArr"
            multiple
            placeholder="请选择">
            <el-option v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="整点时间"
          prop="startHourStr">
          <el-time-select v-model="form.startHourStr"
            :picker-options="{
                        start: '00:00',
                        step: '00:60',
                        end: '23:00'
                    }"
            placeholder="选择时间">
          </el-time-select>

        </el-form-item>

      </el-form>

      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="submitFormActivity">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>


import {
  listSelect
} from "@/api/platform/store"
import {
  addActivity, listByShopId, delActivity
} from "@/api/service/activity"
import {
  listProboxServiceItem, updateStatus, updateRecommend, listStoreByItemId, isSaveByList, isSaveDeviceByList, listDeviceByItemId,
  addOrUpdateCompose, listComposeByItemId, delItem, updateShow
} from "@/api/service/item"
import {
  selectOptions
} from "@/api/service/serviceCategory";
import selected from "@/components/Activity/SelectedStore";
import commodityStore from "@/components/Activity/commodityStore";

import selectedDevice from "@/components/Activity/SelectedDevice";
import commodityDevice from "@/components/Activity/commodityDevice";

import selectedItem from "@/components/Activity/SelectedItem";
import commodityItem from "@/components/Activity/commodityItem";

import selectedItemActivity from "@/components/Activity/SelectedItemActivity";

export default {
  name: "item",
  components: { selected, commodityStore, selectedDevice, commodityDevice, selectedItem, commodityItem, selectedItemActivity },
  data () {
    return {
      // 表单参数
      form: {
        activityType: 'new',
        shopType: 'service',
        isLimit: '0'
      },
      rules: {
        time: [{
          required: true,
          message: "活动时间不能为空",
          trigger: "blur"
        }],
        startHourStr: [{
          required: true,
          message: "整点开始不能为空",
          trigger: "blur"
        }],
      },
      storeInFoOptions: [
        { name: '秒杀', value: 'seckill' },
        { name: '限时购', value: 'limittime' },
        { name: '新人购', value: 'new' }
      ],
      options: [
        { lable: '星期一', value: '星期一' },
        { lable: '星期二', value: '星期二' },
        { lable: '星期三', value: '星期三' },
        { lable: '星期四', value: '星期四' },
        { lable: '星期五', value: '星期五' },
        { lable: '星期六', value: '星期六' },
        { lable: '星期日', value: '星期日' }
      ],
      categoryOptions: [],
      categoryUids: [],
      dialogVisible: false,
      selectedDataActivity: [],
      viewOpenActivity: false,
      storeItemId: null,
      storeOpen: false,
      selectedData: [],
      viewOpen: false,
      deviceItemId: null,
      deviceOpen: false,
      selectedDataDevice: [],
      viewOpenDevice: false,
      serviceItemId: null,
      itemOpen: false,
      selectedDataitem: [],
      selectedDataItem: [],
      viewOpenItem: false,
      // 遮罩层
      activeClass: -1,
      loading: true,
      // 选中数组
      ids: [],
      //选中数组的名字
      names: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 商品单位表格数据
      unitList: [],
      // 弹出层标题
      title: "",
      //查看详细标题
      viewTitle: "",
      // 是否显示弹出层
      open: false,
      //是否显示查看详细弹出层
      viewOpen: false,
      //常用状态数据字典
      statusOptions: [],
      //项目类型
      itemTypeOptions: [],
      //门店列表
      storeInFoOptions: [],
      //查看详细数据
      showData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        itemName: null,
        itemType: null,
        storeId: null,
        auditStatus: null,
        parentCategory: null,
        childCategory: ''
      },
      qf: [],
    };
  },
  created () {
    this.getList();
    this.getDicts("proBoxService_itemType").then(response => {
      this.itemTypeOptions = response.data;
    });
    listSelect().then(response => {
      this.storeInFoOptions = response.data || [];
    });

    // 分类
    selectOptions().then(response => {
      this.categoryOptions = response.data;
    });
  },
  methods: {
    categoryUidChange (e) {
      if (e.length > 0) {
        this.queryParams.parentCategory = e[0]
        if (e[1]) {
          this.queryParams.childCategory = e[1]
        }
      } else {
        this.queryParams.parentCategory = null
        this.queryParams.childCategory = null
      }
    },
    handleCommand (command, row) {
      switch (command) {
        case "addStore":
          this.addStore(row);
          break;
        case "addDevice":
          this.addDevice(row);
          break;
        case "addItem":
          this.addItem(row);
          break;
        case "addItemActivity":
          this.addItemActivity(row);
          break;
        case "handleDelete":
          this.handleDelete(row);
          break;

        default:
          break;
      }
    },
    tabResponActivity (datas) {
      debugger
      let arr = []
      arr.push(this.storeItemId);
      delActivity(arr).then(resp => {
        let data = {
          'activityId': datas.activityId,
          'shopType': 'service'
        }
        listByShopId(data).then(response => {
          this.selectedDataActivity = response.data;
          //this.viewOpenActivity = true;
          this.msgSuccess("删除成功");
          this.dialogVisible = false;
          this.$forceUpdate()
          setTimeout(() => {
            this.$refs['childssss'].getList();
          });
        });
      });

    },
    cancelsActivity () {
      this.viewOpenActivity = false;
    },
    submitFormActivity () {
      this.$refs["form"].validate(valid => {
        this.form.startTime = this.form.time[0]
        this.form.endTime = this.form.time[1]
        if (valid) {
          addActivity(this.form).then(rep => {
            let data = {
              'shopId': this.form.shopId,
              'shopType': 'service'
            }
            listByShopId(data).then(response => {

              this.selectedDataActivity = response.data;
              //this.viewOpenActivity = true;
              this.msgSuccess("添加成功");
              this.dialogVisible = false;
              this.$forceUpdate()
              setTimeout(() => {
                this.$refs['childssss'].getList();
              });
            });
          })
        }
      });
    },
    addItemActivity (rows) {
      this.storeItemId = rows.itemId;
      let data = {
        'shopId': rows.itemId,
        'shopType': 'service'
      }
      listByShopId(data).then(response => {
        this.selectedDataActivity = response.data;
        this.viewOpenActivity = true;
      });
    },
    selectCommodityActivity () {
      this.$forceUpdate()
      this.dialogVisible = true;
      this.form = {
        activityType: 'new',
        shopType: 'service',
        isLimit: '0',
        'shopType': 'service',
        'shopId': this.storeItemId,
      };
    },
    submitFormsItem () {
      let qf = [];
      this.selectedDataItem.forEach(vo => {
        qf.push(vo.itemId);
      })
      addOrUpdateCompose(qf, this.storeItemId).then(response => {
        this.msgSuccess("修改成功");
        this.viewOpenItem = false;
        this.getList();
      });
    },
    multipleSelectionItem (data) {
      this.itemOpen = false
      this.$nextTick(() => {
        this.selectedDataItem = data;
        this.$forceUpdate();
        setTimeout(() => {
          this.$refs.childItem.getList();
        });
      })
    },

    toCloseBoxItem () {
      this.itemOpen = false;
    },

    selectCommodityItem () {
      this.$forceUpdate()
      this.itemOpen = true;
      this.$nextTick(() => {
        this.$refs["selTabless"].greet(this.selectedDataItem);
      });
    },

    cancelsItem () {
      this.viewOpenItem = false;
    },

    hahasItem () {
      this.selectedDataItem = [];
    },

    addItem (rows) {
      this.storeItemId = rows.itemId;
      listComposeByItemId(rows.itemId).then(response => {
        this.selectedDataItem = response.data;
        this.viewOpenItem = true;
      });
    },
    //
    submitFormsDevice () {

      let qf = [];
      this.selectedDataDevice.forEach(vo => {
        qf.push(vo.deviceId);
      })

      isSaveDeviceByList(qf, this.storeItemId).then(response => {
        this.msgSuccess("修改成功");
        this.viewOpenDevice = false;
        this.getList();
      });
    },

    multipleSelectionDevice (data) {
      this.deviceOpen = false
      this.selectedDataDevice = data;
      this.$nextTick(() => {
        this.$refs.childs.getList();
      });
    },

    toCloseBoxDevice () {
      this.deviceOpen = false;
    },

    selectCommodityDevice () {
      this.$forceUpdate()
      this.deviceOpen = true;
      this.$nextTick(() => {
        this.$refs["selTables"].greet(this.selectedDataDevice);
      });
    },

    cancelsDevice () {
      this.viewOpenDevice = false;
    },

    hahasDevice () {
      this.selectedDataDevice = [];
    },

    addDevice (rows) {
      this.storeItemId = rows.itemId;
      listDeviceByItemId(rows.itemId).then(response => {
        this.selectedDataDevice = response.data;
        this.viewOpenDevice = true;
      });
    },
    handledetail (row) {
      const itemId = row.itemId
      this.$router.push("/item/detail/" + itemId);
    },
    submitForms () {

      let qf = [];
      this.selectedData.forEach(vo => {
        qf.push(vo.storeUid);
      })

      isSaveByList(qf, this.storeItemId).then(response => {
        this.msgSuccess("修改成功");
        this.viewOpen = false;
        this.getList();
      });
    },
    multipleSelection (data) {
      this.storeOpen = false
      this.selectedData = data;
      this.$nextTick(() => {
        this.$refs.child.getList();
      });
    },
    toCloseBox () {
      this.storeOpen = false;
    },
    selectCommodity () {
      this.$forceUpdate()
      this.storeOpen = true;
      this.$nextTick(() => {
        this.$refs["selTable"].greet(this.selectedData);
      });
    },
    cancels () {
      this.viewOpen = false;
    },
    hahas () {
      this.selectedData = [];
    },
    addStore (rows) {
      this.storeItemId = rows.itemId;
      listStoreByItemId(rows.itemId).then(response => {
        this.selectedData = response.data;
        this.viewOpen = true;
      });
    },
    handleQueryStatus (status) {
      this.activeClass = status;
      if (status == '-1') {
        this.queryParams.auditStatus = null;
      } else {
        this.queryParams.auditStatus = status;

      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    statusFormat (status) {
      let showStatus = "";
      if (status == "1") {
        showStatus = "销售中";
      } else {
        showStatus = "已下架"
      }
      return showStatus;
    },
    handleShowChange (row) {
      let text = row.isShow === "0" ? "隐藏" : "显示";
      this.$confirm('确定要把项目名称为"' + row.itemName + '"设为' + text + '吗？', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return updateShow(row.itemId, row.isShow);
      }).then(() => {
        this.msgSuccess("操作成功");
        this.getList();
      }).catch(function () {
        row.isShow = row.isShow === "0" ? "1" : "0";
      });
    },
    handlerecommendChange (row) {
      let text = row.isRecommend === "0" ? "不推荐" : "推荐";
      this.$confirm('确定要把项目名称为"' + row.itemName + '"设为' + text + '吗？', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return updateRecommend(row.itemId, row.isRecommend);
      }).then(() => {
        this.msgSuccess("操作成功");
        this.getList();
      }).catch(function () {
        row.isRecommend = row.isRecommend === "0" ? "1" : "0";
      });
    },
    handleStatusChange (row) {
      let text = row.auditStatus === "0" ? "下架" : "上架";
      this.$confirm('确定要把项目名称为"' + row.itemName + '"设为' + text + '吗？', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return updateStatus(row.itemId, row.auditStatus);
      }).then(() => {
        this.msgSuccess("操作成功");
        this.getList();
      }).catch(function () {
        row.auditStatus = row.auditStatus === "0" ? "1" : "0";
      });
    },
    getList () {
      this.loading = true;
      listProboxServiceItem(this.queryParams).then(response => {
        this.unitList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset () {
      this.form = {
        unitUid: null,
        unitName: null,
        dataStatus: "1",
        dataPriority: 10,
        createUid: null,
        createTime: null,
        updateUid: null,
        updateTime: null,
        platformUid: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.queryParams.parentCategory = null
      this.queryParams.childCategory = null
      this.categoryUids = []
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.unitUid)
      this.names = selection.map(item => item.unitName)
      this.single = selection.length !== 1
      this.multiple = !selection.length
      //用于禁用删除
      if (this.multiple == false) {
        for (var i = 0; i < selection.length; i++) {
          var element = selection[i];
          if ("1" === element.dataStatus) {
            this.multiple = true;
            break;
          }
        }
      }
    },

    pf (row, status) {
      let text = status === "0" ? "下架" : "上架";

      this.$confirm('确定要把项目名称为"' + row.itemName + '"设为' + text + '吗？', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return updateStatus(row.itemId, status);
      }).then(() => {
        this.msgSuccess("操作成功");
        this.getList();
      }).catch(function () {
        row.auditStatus = row.auditStatus === "0" ? "1" : "0";
      });
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.$router.push("/item/data/");
    },

    handCloseDetail () {
      this.viewOpen = false
      this.showData = []
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      this.$router.push("/item/editData/" + row.itemId);

    },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.unitUid != null) {
            updateUnit(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addUnit(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      const unitUids = row.itemId;
      this.$confirm('是否确认删除服务项目名称为"' + row.itemName + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delItem(unitUids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport () {
      this.download('product/unit/export', {
        ...this.queryParams
      }, `product_unit.xlsx`)
    }
  }
};
</script>
<style lang="less" scoped>
.couponSelectTop {
  width: 100%;
  height: 100%;
  display: flex;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;

  .couponSelect {
    width: 263px;
    height: 150px;
    background: #fff;
    margin-right: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-shadow: 5px 5px 10px 6px rgba(0, 0, 0, 0.03);
  }

  .image-rows {
    width: 60px;
    height: 60px;
  }
}
</style>
